<template>
  <div>
    <van-nav-bar title="添加储蓄卡">
      <img
        src="~assets/image/arrow_left.png"
        alt=""
        slot="left"
        width="20"
        height="20"
        @click="leftClick"
      />
    </van-nav-bar>
    <div class="addCred">
      <van-cell-group>
        <van-field
          label="持卡人"
          :value="realname"
          readonly
          label-align="right"
          label-width="80px"
        />
        <van-field
          v-model="credId"
          label-align="right"
          label-width="80px"
          type="digit"
          label="银行卡号"
          placeholder="请输入您的储蓄卡号"
        />
        <van-field
          v-model="phone"
          label-align="right"
          label-width="80px"
          type="tel"
          label="预留手机"
          placeholder="请输入您的预留手机号"
        />
        <van-field
          readonly
          clickable
          label-align="right"
          label-width="80px"
          label="开户省市"
          :value="address"
          placeholder="请选择开户行所在省市"
          @click="showPicker = true"
        />
      </van-cell-group>
      <van-radio-group v-model="radio">
        <van-radio name="1"
          >到账卡：用于刷卡到账,余额提现（必须绑定一张）</van-radio
        >
        <van-radio name="2">充值卡：仅限于购买产品使用</van-radio>
      </van-radio-group>
    </div>
    <p class="next" @click="next">绑定</p>

    <van-popup v-model="showPicker" round position="bottom">
      <van-area
        :area-list="areaList"
        :columns-num="2"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>
<script>
import areaList from "components/area";
import {
  queryCertificationInfoApi,
  queryExecuteAddBankCardApi,
} from "network/ApiServe.js";
export default {
  name: "AddStorageCard",
  created() {
    this.token = localStorage.getItem("token");
  },
  data() {
    return {
      radio: "1",
      credId: "6236682590001004513",
      phone: "18625616360",
      address: "",
      areaList: areaList,
      showPicker: false,
      realname: "",
      idcard: "",
      province: "",
      city: "",
    };
  },
  mounted() {
    this.getCertificationInfo();
  },
  methods: {
    leftClick() {
      this.$router.back(-1);
    },
    onConfirm(value, index) {
      this.showPicker = !this.showPicker;
      this.address = value[0].name + "-" + value[1].name;
      this.province = value[0].name;
      this.city = value[1].name;
      console.log("value:", value[0].name, value[1].name);
    },
    onCancel() {
      this.showPicker = !this.showPicker;
    },
    getCertificationInfo() {
      queryCertificationInfoApi(this.token)
        .then((res) => {
          //console.log("getCertificationInfo", res);
          if (res.resp_code == "000000") {
            this.realname = res.result.realname;
            this.idcard = res.result.idcard;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    next() {
      if (this.credId.length == 0) {
        this.$toast("请输入您的储蓄卡号");
        return;
      }
      if (this.phone.length == 0) {
        this.$toast("请输入您的预留手机号");
        return;
      }
      if (this.address.length == 0) {
        this.$toast("请选择开户行所在省市");
        return;
      }
      queryExecuteAddBankCardApi(
        this.token,
        this.realname,
        this.credId,
        this.idcard,
        this.phone,
        2, //0 信用卡 2 储蓄卡
        null,
        null,
        null,
        null,
        null,
        this.province,
        this.city
      )
        .then((res) => {
          if (res.resp_code == "000000") {
            this.$toast(res.resp_message);
            this.$router.back(-1);
          } else {
            this.$toast(res.resp_message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style scoped>
.addCred {
  background-color: #fff;
  font-size: 15px;
  color: #444;
  padding-left: 15px;
  padding-right: 15px;
}
.van-radio-group {
  margin: 20px;
  padding-bottom: 20px;
  font-size: 14px;
  color: #444;
}
.van-radio-group .van-radio {
  margin-top: 10px;
}
.next {
  color: #fff;
  background-color: #121212;
  width: 84%;
  justify-content: space-around;
  margin: 20px auto;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 16px;
  border-radius: 8px;
}
</style>